Is there an artist in the house?

Drawing. I have never been really great at it. Liberty Basic is pretty good at it though - if you know the commands. There are quite a few graphics commands that bring a fair amount of power to Liberty Basic graphically speaking. The graphics are based on the old "turtle" graphics or Logo programming language. The concept is centered around a pen that is directed relative to its own location or in relation to the upper left corner of the graphics region. The idea is one of attaching a pen to a turtle and telling it to move. As it move it draws a trail showing where it has been. Liberty Basic does this, allowing us to put a pen to the screen and giving the pen commands such as GO, TURN and NORTH.

I do not intend to fully explain the workings of the Liberty Basic graphics commands - luckily this has been done very nicely by Alyce Watson - you will find her graphics series in the newsletter beginning somewhere around here: http://www.libertybasicuniversity.com/lbnews/nl98/index.htm

What we do want to do is draw a few boxes to represent the six faces of dice. I worked out how large and where in a few minutes of experimentation. Here is what we are going to produce:

To produce the boxes I actually use the graphics command BOX. BOX creates a box from the current pen location. Size is specified by the X and Y arguments which fix the end points of the box as X and Y pixels from the upper left corner of the graphics area or window. This is called absolute referencing. The box size is implied by the difference in starting location and ending locations of the box, which are both in relation to the top left of the window. Before I can actually make the boxes shown above I must first set the "pen" (the pen does the drawing) at the starting location. The GOTO command is used to accomplish this. GOTO also takes an X and a Y argument, which specify a location in the graphics area relative to the upper left corner of the graphics area or window.

If you look through the help file and check out the Graphics Commands, you will notice they are "printed" to the window. Even though the help file specifies the Print command, it is no longer required by Liberty Basic version 3 and up. You must however specify the window handle and then pass your command as a quoted string.

Here is the code to create just the six boxes show above.

    'show dice outlines
    #main "goto 20 20; down; box 100 100; up"
    #main "goto 140 20; down; box 220 100; up"
    #main "goto 260 20; down; box 340 100; up"
    #main "goto 380 20; down; box 460 100; up"
    #main "goto 500 20; down; box 580 100; up"
    #main "goto 620 20; down; box 700 100; up"
    #main "flush"

Notice the Liberty Basic allows us to chain graphics commands, separating each of them with a semicolon. I have put all the commands to create each dice on a single line. There are a couple commands that we have not talked about. Lets review the whole thing and see what is happening.

As I intoned, the "#main" is required to direct our graphics commands to the graphics window specified by the window handle #main. The first command in the series is a GOTO command which forces the graphics pen a specific location relative to the upper left corner of the window (or graphics area if you are working with a graphics box that is not full screen). I force the pen to 20, 20. Next is the command DOWN. This puts the pen down onto the screen so that anything drawn will be visible to the user. The pen always starts in the up position. Next is the BOX command which sets the end point for the box and actually causes Liberty Basic to create the box on the screen. The last thing I do is lift the pen up to stop the drawing. I do this because I will be moving the pen in the next series of commands.

The next series of commands look very similar to the first, with the exception of some of the X and Y coordinates. The last command is the FLUSH command. Although it invokes thoughts of a trip to the restroom, what this actually does is cause the graphics that have been draw to be fixed to the window. If we did not do this then our graphics would be erased if another window or dialog should be displayed above my window.

I left a few things out. Here they are. I am not going to offer a detailed explanation here, suffice to say they help the program to work better.

    #main "trapclose [quit]"
    #main "down; fill white; up; flush"

Let me just mention that the first command allows us to intercept the condition which occurs when the user presses the "X" in the upper right corner of a window. With it we can set up some code to close and exit cleanly. This is important when writing a windows program.

The other series of commands should look a little bit familiar - they paint the background of the graphics area white, and flush it to make it stick.

So far the program should look a bit like this:

WindowWidth = 740
WindowHeight = 160
UpperLeftX = 40
UpperLeftY = 40

Open "Show Dice" for Graphics_nsb as #main

    #main "trapclose [quit]"
    #main "down; fill white; up; flush"
    #main "font ms_sans_serif 10"
    
    'show dice outlines
    #main "goto 20 20; down; box 100 100; up"
    #main "goto 140 20; down; box 220 100; up"
    #main "goto 260 20; down; box 340 100; up"
    #main "goto 380 20; down; box 460 100; up"
    #main "goto 500 20; down; box 580 100; up"
    #main "goto 620 20; down; box 700 100; up"
    #main "flush"
   
    Wait

We have drawn the dice. They are the six boxes across the window we have created. Each dice is 80 pixels by 80 pixels square, and they are each spaced 20 pixels apart. Now let us consider what the dice faces will look like. As you probably know from exposure to dice, the one dice has a dot in the middle, the two dice has two dot, oriented in a diagonal pattern. The three has the same dots are the two along with a dot in the center, also forming a diagonal pattern. We need to plan on how to lay these out so that we can give our program instructions to draw them.

I have created a little diagram that shows where I will place some of the dots. Symmetry is the key to good looking dice. Shown are the hole patterns for all of the holes that will be required to display the six faces of the dice.

As you can see we have already draw our boxes (or dice), the first of which starts at position 20,20 and is 80 pixels square. We will be creating dots 15 pixels from the edge of the dice for most patterns, and some patterns will require dots that are 40 pixels from the edge (or centered on the x, y or both axis). Also notice that the next (and subsequent dice) are basically the same as the first. They are simply further offset from the graphic window origin in the x direction (120 pixels).

Now that we have worked out the basic geometry of the dice, lets take a look at what it takes to draw a filled circle. The Liberty Basic help file is quickly consulted, and the command CIRCLEFILLED is located. Here is what we learn:

print #handle, "circlefilled r"

Draw a circle with radius r, and filled with the color specified using the command backcolor (see above).

So we need to consult the command backcolor to learn how to set the color that the circle will be filled with. Of course we want to use black, but as you will see there are several choices. Once again, the help file:

print #handle, "backcolor COLOR"


This command sets the color used when drawn figures are filled with a color.  The same colors are available as with the color command above.

Checking the color command yields the following:

.indent
Here is a list of valid colors (in alphabetical order):

black, blue, brown, buttonface, cyan, darkblue, darkcyan, darkgray, darkgreen, darkpink, darkred, green, lightgray, palegray, pink, red, white, yellow

Palegray and Lightgray are different names for the same color.  Buttonface is the default background color currently set on a user's system, so it will vary according to the desktop color scheme.

I recommend taking a look at the help file yourself - click on GUI Programming -> Graphics Commands. These commands and many others are listed there. You will also find a very nice color scale that show exactly what each of the 16 valid named colors are, and explains how to get more colors than just those that are named. For now let us concentrate on setting the background color to black for our graphics window.

The command is "backcolor" and the color name, and it is also sent to the graphics window by specifying the window's handle. The command from the help file indicates that you should use the PRINT statement to actually print the command to the graphics window, and that was required in Liberty Basic version 2 and below, but it is now an optional component of the command. The following format is the preferred and more acceptable format of the same command:

#handle "backcolor COLOR"
<.pre>
.end

Notice that there is no comma separating the handle from the command.  If you omit the optional PRINT statement from the command, also omit the comma.

Here is the specific command used with our program to set the back color to black:

.indent
#main "backcolor black"

With the background set to black we are set to begin drawing circles. We have basically mapped out where we need to draw our circles, lets work on placing the first in the center of the first box.

Looking at the command to create a filled circle we see that we must provide a value for the radius of the circle we want to create. After a little experimentation I determined that a radius of 5 pixels works great. Our command to create the circle looks something like:

#main "circlefilled 5"

On its own the command does nothing, as the state of the pen is up. As you will remember from an earlier discussion of the pen, it must be put down to actually draw on the screen. So we add the command to put the pen down:

#main "down"

Liberty Basic allows us to chain these graphics commands in the same command string. We can simplify the two commands above as:

#main "down; circlefilled 5"

We have a circle, but we need to put it into the right place. The circlefilled command does not include a mechanism for placing the filled circle anywhere special. Placement is accomplished with the GOTO command which we discussed above. It allows us to move the pen to the spot where the filled circle will be drawn. As with the boxes we drew for the dice, we need to put the pen up when moving the pen from location to location using the goto command.

Here is the code to draw the face of the one dice:

    'draw one
    #main "up; goto 60 60"
    #main "down; circlefilled 5"

We placed the pen in the middle of the dice. We calculated the middle using the information from our plan above. 20 pixels for the edge of the window to the leading edge of the dice, 40 pixels from there to the middle of the dice. That is true for both the x and y directions for the first dice.

The next dice will be a two. We have a little more complicated job, since the leading edge of the dice in the x direction is 140 pixels from the edge of the window. This time the filled circles go in the upper left corner and lower right corner. The upper left is 140 plus 15 in the x direction and 20 plus 15 in the y direction. The lower right is 140 plus 15 plus 50 in the x direction and 20 plus 15 plus 50 in the y direction. This works out to be the following coordinates: 155, 35 and 205,85. Here is our code for this dice as well:

    #main "up; goto 155 35"
    #main "down; circlefilled 5"
    #main "up; goto 205 85"
    #main "down; circlefilled 5"

Take a look at the program in Appendix B and you will see that I have worked out the first four dice faces. I have given you the tools and insight into working out the last two faces. We will be using these as building blocks for our next game in a future series. For our challenge for next time, complete the program as suggested, adding the missing dice faces.

We have covered tremendous ground this time. We have opened up new frontiers - many of which we are just beginning our journey into. I hope you have enjoyed this installment of this series, and that you will try completing the challenge, and maybe also try expanding the starquest game a little too.

Brad Moore

(c) copyright 2003